<template>
  <div class="public-table-container">
    <!-- 表格上面搜索栏或者按钮的默认插槽   -->
    <div class="buttons-wrap">
      <slot></slot>
    </div>
    <!-- 表格顶部添加 -->
    <div class="table-top">
      <slot name="topContent"></slot>
    </div>
    <!-- 表格内容  -->
    <div class="table-content container_table">
      <el-table
        style="width: 100%; height: 100%"
        v-bind="$attrs"
        :class="[
          radio ? 'radio-table' : '',
          disabledSelectAll ? 'radio-table' : '',
        ]"
        :scrollbar-always-on="true"
        ref="tableRef"
        :data="tableData"
        @cell-click="cellClick"
        @selection-change="handleSelectionChange"
        :border="border"
        :row-style="rowStyles"
        :cell-style="cellStyle"
        @select="selectClick"
        :header-cell-style="headerCellStyle"
        :row-key="rowKey"
        :tree-props="treeProps"
        :span-method="objectSpanMethod"
        :height="height"
        :show-summary="showSummary"
        :summary-method="summaryMethod"
      >
        <el-table-column
          v-if="selection"
          type="selection"
          :selectable="selectable"
        >
        </el-table-column>
        <el-table-column v-if="radio" type="selection" label="单选">
        </el-table-column>
        <el-table-column
          v-if="index"
          type="index"
          label="序号"
          align="left"
          :width="indexWidth"
          :fixed="indexFixed ? 'left' : indexFixed"
        >
          <template #default="scope" v-if="isPaging">
            <span>{{ scope.$index + (page.current - 1) * page.size + 1 }}</span>
          </template>
          <template #default="scope" v-else>
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <template v-for="item in tableOption" :key="item.prop">
          <TableColumn :item="item">
            <template v-if="item.slot" #[item.prop]="scope">
              <slot :name="item.prop || item.property" :row="scope.row"></slot>
            </template>
          </TableColumn>
        </template>
        <!-- 需要时，
          1.为组件设置 operation='true' 启用;
          2.在组件中设置名为 <template #menu="scope"></template> 的插槽;
          3.在组件中设置名为 operationAlign="left" 可控制对其方式;
          4.在组件中设置名为 operationfixed="right" 可控制固定位置;
        -->

        <el-table-column
          v-if="operation"
          label="操作"
          :align="operationAlign"
          :width="operationWidth + 'px'"
          :fixed="operationfixed"
        >
          <template #default="scope">
            <slot name="menu" :row="scope.row" :$index="scope.$index" />
          </template>
        </el-table-column>

        <template #append>
          <slot name="append"></slot>
        </template>
      </el-table>
    </div>
    <!-- 分页   -->
    <div class="pagination-warp">
      <Pagination
        class="pagination"
        v-show="isPaging"
        :total="page.total"
        :page="page.current"
        :limit="page.size"
        :pageSizes="[20, 30, 40, 50, 100, 150, 200]"
        @pagination="pageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElTable, ElTableColumn } from "element-plus";
import Pagination from "@/components/Pagination";
import TableColumn from "./TableColumn.vue";
const props = defineProps({
  headerCellStyle: {
    type: Object,
    default: {},
  },
  selection: {
    // 是否显示多选
    type: Boolean,
    default: false,
  },
  disabledSelectAll: {
    // 是否显示多选
    type: Boolean,
    default: false,
  },
  radio: {
    type: Boolean,
    default: false,
  },
  isPaging: {
    // 是否分页
    type: Boolean,
    default: true,
  },
  index: {
    // 是否设置序号，默认设置
    type: Boolean,
    default: true,
  },
  indexFixed: {
    type: [Boolean, String],
    default: false,
  },
  indexWidth: {
    // 序号列宽
    type: [String, Number],
    default: "55",
  },
  border: {
    // 是否设置边框，默认不要
    type: Boolean,
    default: function () {
      return false;
    },
  },
  operation: {
    // 是否有操作列，默认无
    type: Boolean,
    default: function () {
      return false;
    },
  },
  operationAlign: {
    // 操作列对齐方式，默认 center
    type: String,
    default: "center",
  },
  operationWidth: {
    // 操作列宽度，默认 130px
    type: Number,
    default: 130,
  },
  operationfixed: {
    type: [String, Boolean],
    // 操作列固定方式，默认 center
    default: function () {
      return false;
    },
  },
  tableData: {
    // 列表数据
    type: Array,
    default: function () {
      return [];
    },
  },
  tableOption: {
    // 表头
    type: Array,
    default: () => [],
  },
  page: {
    // 分页
    type: Object,
    default: function () {
      return {
        total: 0,
        current: 1,
        page: 10,
      };
    },
  },
  rowStyles: {
    type: Function,
    default: () => {
      return () => {};
    },
  },
  cellStyle: {
    type: Object,
    default: () => {
      return {};
    },
  },
  treeProps: Object,
  rowKey: {
    type: String,
    default: "id",
  },
  objectSpanMethod: {
    type: Function,
    default: () => {},
  },
  height: {
    type: String,
    default: "auto",
  },
  showSummary: {
    type: Boolean,
    default: false,
  },
  summaryMethod: {
    type: Function,
    default: () => {},
  },
});

const get_overHidden = (value) => {
  if (value === undefined || value === "" || value === true) {
    return true;
  }
  return false;
};

const emits = defineEmits([
  "cell-click",
  "page-change",
  "handleSelectionChange",
  "selectClick",
]);

const cellClick = (row, column, cell, event) => {
  emits("cell-click", { row, column, cell, event });
};

const handleSelectionChange = (e) => {
  emits("handleSelectionChange", e);
};

const pageChange = (e) => {
  emits("page-change", e);
};

const tableRef = ref(null);

//点击选择框时触发
const selectClick = (selection, row) => {
  if (props.radio) {
    // 如果是单选按钮时,该代码生效
    if (selection.length > 1) {
      let del_row = selection.shift();
      tableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
    }
  }
  emits("selectClick", row);
};

// 拼接图片服务器地址
const getUrl = (url) => {
  /* const pat=/http/g;
  if (pat.test(url)){
    return url;
  }else {
    return process.env.VUE_APP_FILE_ADDRESS_API + url;
  }*/
  return url;
};

const getUrls = (urls) => {
  if (typeof urls === "object" && urls.length > 0) {
    return urls.forEach((item) => {
      item = getUrl(item);
    });
  }
  return urls;
};

const clearSelection = () => {
  tableRef.value.clearSelection();
};

const selectable = (row, index) => {
  if (row.disabled) {
    return false;
  } else {
    return true;
  }
};

const toggleRowSelection = (row, bool) => {
  tableRef.value.toggleRowSelection(row, bool);
};

defineExpose({
  toggleRowSelection,
  clearSelection,
});
</script>

<style lang="scss" scoped>
// 隐藏全选按钮
:deep(.radio-table th.el-table__cell:nth-child(1) .cell) {
  visibility: hidden;
}
.public-table-container {
  .pagination-warp {
    margin-top: 10px;
  }
}

:deep(.el-tooltip__popper) {
  max-width: 50vw;
  border: 1px solid red;
}

:deep(.el-table) {
  .cell {
    padding-left: 12px;
    padding-right: 12px;
  }
}

// :deep(.container_table) {
//   // 去除原本的进度条
//   .el-table__body-wrapper {
//     overflow-x: hidden !important;
//   }
//   // 添加新的的进度条

//   .el-table__footer-wrapper {
//     overflow-x: auto !important;
//   }
// }
</style>
